<template>
  <view class="">
    <scroll-view scroll-y @scrolltolower="toBottom">
      <view class="album_swiper">
        <swiper
          indicator-dots
          autoplay
          interval="2500 "
          circular
          indicator-active-color="#FFA500"
          v-if="banners.length !== 0"
        >
          <swiper-item v-for="item in banners" :key="item.id">
            <image :src="item.thumb" mode="widthFix"></image>
          </swiper-item>
        </swiper>
      </view>
      <!--  专辑列表 -->
      <view class="album_list">
        <navigator
          class="list_item"
          v-for="item in albums"
          :key="item.id"
          :url="`/pages/home/album/albumDetail?id=${item.id}`"
        >
          <view class="img"><image :src="item.cover"></image></view>
          <view class="text">
            <view class="title">{{ item.name }}</view>
            <view class="content">{{ item.desc }}</view>
            <view class="follow">
              <view class="btn">+关注</view>
            </view>
          </view>
        </navigator>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      params: {
        limit: 30,
        order: "new",
        skip: 0,
      },
      albums: [],
      banners: [],
      flag: true,
    };
  },

  methods: {
    getAlbum() {
      this.$request({
        url: "http://157.122.54.189:9088/image/v1/wallpaper/album",
        data: this.params,
      }).then((res) => {
        const ress = res.data.res;
        console.log(ress);
        if (this.banners.length === 0) {
          this.banners = ress.banner;
        }
        if (ress.album.length === 0) {
          this.flag = false;
          uni.showToast({
            title: "已全部加载完毕",
          });
          return;
        }
        this.albums.push(...ress.album);
      });
    },
    toBottom() {
      if (this.flag) {
        this.params.skip += this.params.limit;
        this.getAlbum();
      } else {
        uni.showToast({
          title: "已全部加载完毕",
        });
      }
    },
  },
  created() {
    this.getAlbum();
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: "专辑",
    });
  },
};
</script>
<style lang="scss" scoped>
.album_swiper {
  swiper {
    height: calc(750rpx / 2.25);
    image {
      height: 100%;
    }
  }
}
.album_list {
  margin-top: 10rpx;
  .list_item {
    display: flex;
    border-bottom: 2rpx solid #ececee;
    padding: 18rpx 6rpx;
    .img {
      flex: 35%;

      image {
        width: 240rpx;
        height: 210rpx;
      }
    }

    .text {
      flex: 65%;

      margin-left: 12rpx;

      .title {
        font-size: 36rpx;
        color: black;
      }

      .content {
        font-size: 26rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 12rpx 0;
      }
      .follow {
        display: flex;
        justify-content: flex-end;
        padding-right: 18rpx;
        color: #ff4500;
        .btn {
          padding: 9rpx 6rpx;
          border: 2rpx solid #ff4500;
        }
      }
    }
  }
}
scroll-view {
  height: calc(100vh - 36px);
}
</style>
